<template>
    <div class='container'>
        <aside>
            <ul>
                <li v-for="(item, index) in foods" @click="scrollTo(index)" :class="{ 'tab-active': curIndex == index }">
                    {{ item.title }}
                </li>
            </ul>
        </aside>
        <main ref="main">
            <div v-for="food in foods">
                <h4>{{ food.title }}</h4>
                <food-item v-for="f in food.content" :data="f" :key="f.id" @add-to-cart="addToCart"></food-item>
            </div>
        </main>

        <teleport to='body'>
            <cart-componet></cart-componet>
        </teleport>


        <!-- 抛物线小球 -->
        <teleport to='body'>
            <ParabolicSphere ref="ball" :duration="1" />
        </teleport>

        <!-- 没有数据时，显示loading -->
        <loading v-if="foods.length <= 0"></loading>
    </div>
</template>

<script>
import Loading from '@/components/Loading.vue';
import CartComponet from '@/components/CartComponet.vue';
import FoodItem from '@/components/FoodItem.vue';
import Teleport from '@/components/teleport.vue';
import ParabolicSphere from '@/components/Parabolic-sphere.vue';
export default {
    name: '',
    data() {
        return {
            curIndex: 0,
            isClick: false,
            x: 0,
            y: 0,
            show: false
        }
    },
    components: { CartComponet, FoodItem, Teleport, ParabolicSphere, Loading },
    computed: {

        foods() {
            return this.$store.state.foods
        },

    },
    created() {
        if (this.foods.length <= 0) {
            this.$store.dispatch("getFoods")
        }

    },
    mounted() {
        // 滚动的容器元素
        let main = this.$refs.main;
        main.addEventListener("scroll", () => {
            if (!this.isClick) {
                // 获取向上卷的距离
                let scrollTop = main.scrollTop
                Array.prototype.forEach.call(main.children, (ul, index) => {
                    if (scrollTop >= ul.offsetTop - 212) {
                        this.curIndex = index;
                    }
                })
            }
        })
    },
    methods: {
        scrollTo(index) {
            this.isClick = true;
            this.curIndex = index
            let main = this.$refs.main;
            let curUl = main.children[index]
            let top = curUl.offsetTop;

            main.scrollTo({
                left: 0,
                top: top - 212,
                behavior: "smooth",  //平滑滚动
            })

            setTimeout(() => {
                this.isClick = false
            }, 1000)

        },
        addToCart(pos) {
            // 把点击的按钮的位置，传给小球
            let ball = this.$refs.ball;
            ball.x = pos.x
            ball.y = pos.y;
            ball.isShow = true;
        },
    }
}
</script>
<style scoped lang='scss'>
.container {
    flex: 1;
    display: flex;
    overflow: hidden;
    margin-top: 12px;

    aside {
        height: 100%;
        width: 100px;
        // background-color: beige;

        ul {
            text-align: center;
            font-size: 12px;
            color: #999;

            li {
                height: 50px;
                line-height: 50px;
            }
        }
    }

    main {
        height: 100%;
        flex: 1;
        overflow-y: scroll;

        h4 {
            font-weight: normal;
            color: #666;
        }
    }
}


.tab-active {
    // background-color:aliceblue;
    color: #333;
    font-weight: 800;
    font-size: 14px;
}
</style>
